<template>
	<div v-loading="loading">
		<DetailPage v-if="!loading" v-bind="editFormConfig" :model="data"></DetailPage>
		<!-- 二维码 -->
		<h3 v-if="data.signUpEndTime">签到二维码</h3>
		<div class="qr_code_center" v-if="data.signUpEndTime">
			<VueQrcode ref="qrcode" :value="qrcodeValue" :size="10" :width="100" @change="onDataUrlChange"></VueQrcode>
			<br />
			<div style="margin-left: 10px">
				<el-text tag="ins" class="mx-1" type="primary" @click="toDonwload(data.trainingName)">
					<el-icon>
						<Download /> </el-icon
					>下载二维码</el-text
				>
			</div>
		</div>
		<CourseArrange v-if="!loading" :isRead="true" :headId="data.id" :signUpEndTime="data.signUpEndTime"></CourseArrange>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import { editFormConfig } from '../config'
import CourseArrange from '../editForm/courseArrange.vue'
import DetailPage from '@/views/aplid/DetailPage/index.vue'
import VueQrcode from 'vue-qrcode'
import apiMod from '@/apiMod/index'
import {Download} from '@element-plus/icons-vue'

let props = defineProps({
	nowRowData: {
		type: Object,
		default: () => {},
	},
})
let loading = ref(true)
let qrcodeValue = ref('') // 课程名称
// 获取详情
let data: any = ref({})
const getDetail = () => {
	loading.value = true
	qrcodeValue = props.nowRowData.id
	data.value = props.nowRowData
	// 处理一下报名时间
	if (data.value.signUpStartTime && data.value.signUpEndTime) {
		data.value.signUpTime = data.value.signUpStartTime + '~' + data.value.signUpEndTime
	}
	loading.value = false
}

let qrcode = ref()
let imgSrc = ref('')
const onDataUrlChange = (dataUrl) => {
	imgSrc.value = dataUrl
	console.log('ddsd', imgSrc.value)
}
//将完整的base64转换为blob
function dataURLtoBlob(dataurl) {
	var arr = dataurl.split(','),
		mime = arr[0].match(/:(.*?);/)[1],
		bstr = atob(arr[1]),
		n = bstr.length,
		u8arr = new Uint8Array(n)
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n)
	}
	return new Blob([u8arr], { type: mime })
}
function downloadFile(url, name = "What's the fuvk") {
	console.log('url==', url)
	var a = document.createElement('a')
	a.setAttribute('href', url)
	a.setAttribute('download', name)
	a.setAttribute('target', '_blank')
	let clickEvent = document.createEvent('MouseEvents')
	clickEvent.initEvent('click', true, true)
	a.dispatchEvent(clickEvent)
}
const toDonwload = (name) => {
	var myBlob = dataURLtoBlob(imgSrc.value)
	var myUrl = URL.createObjectURL(myBlob)
	downloadFile(myUrl, name)
}
onMounted(() => {
	getDetail()
})
</script>
<style scoped lang="scss"></style>
